<template>
  <div class="_wz_violationDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
      </colgroup>
      <tbody>
        <tr>
          <td style="position:relative;" colspan="6">信息</td>
        </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
        <col width="13%" />
        <col width="20%" />
      </colgroup>
      <tbody>
        <tr>
          <td style="text-align: right;border-top: 0px;">经营类型</td>
          <td style="border-top: 0px;">{{ formData.deptTransportName ? formData.deptTransportName : "--" }}</td>
          <td style="text-align: right;border-top: 0px;">车牌号</td>
          <td style="border-top: 0px;">{{ formData.vehiclePlateNo ? formData.vehiclePlateNo : "--" }}</td>
          <td style="text-align: right;border-top: 0px;">车架号</td>
          <td style="border-top: 0px;">{{ formData.vehicleFrameNo ? formData.vehicleFrameNo : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;">车牌颜色</td>
          <td>
            <span v-if="formData.vehiclePlateColor == 1">蓝色</span>
            <span v-else-if="formData.vehiclePlateColor == 2">黄色</span>
            <span v-else-if="formData.vehiclePlateColor == 5">绿色</span>
            <span v-else>其他</span>
          </td>

          <td style="text-align: right;">从业人员</td>
          <td>{{ formData.driverName ? formData.driverName : "--" }}</td>
          <td style="text-align: right;">联系电话</td>
          <td>{{ formData.driverPhone ? formData.driverPhone : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;">处罚类型</td>
          <td>
            <Tag type="dot" color="warning" v-if="formData.punishType == 1">警告处理</Tag>
            <Tag type="dot" color="#5ef1c9" v-else-if="formData.punishType == 2">罚款处理</Tag>
            <Tag type="dot" color="#f60e6f" v-else-if="formData.punishType == 3">停职处理</Tag>
            <Tag type="dot" color="error" v-else-if="formData.punishType == 4">开除处理</Tag>
          </td>
          <td style="text-align: right;">处罚时间</td>
          <td>{{ !!formData.punishDate ? formData.punishDate : "--" }}</td>
          <td style="text-align: right;">处罚事件</td>
          <td>{{ !!formData.punishEvent ? formData.punishEvent : "--" }}</td>
        </tr>
        <tr>
          <td style="text-align: right;">处罚措施</td>
          <td>{{ !!formData.punishMeasures ? formData.punishMeasures : "--" }}</td>
          <td style="text-align: right;">处罚登记人</td>
          <td>{{!!formData.punishRegistrantName ? formData.punishRegistrantName : "--" }}</td>
          <td style="text-align: right;">附件文件</td>
          <td>
            <template v-if="formData.punishFile">
              <a v-if="formData.punishFile.split('.')[1] == 'pdf'" target="_blank" :href="apiUrl.imgUrl + '/' + formData.punishFile">查看文件</a>
              <span v-else target="_blank" @click="fileClick(apiUrl.imgUrl + '/' + formData.punishFile)">查看文件</span>
            </template>
            <template v-else>--</template>
          </td>
        </tr>
        <tr>
          <td style="text-align: right;">经营企业</td>
          <td colspan="2" style="text-align: right;">{{ formData.deptName ? formData.deptName : "--" }}</td>
          <td style="text-align: right;">修改时间</td>
          <td colspan="2">{{ !!formData.updateTime ? formData.updateTime : "--" }}</td>
        </tr>
      </tbody>
    </table>

  </div>
</template>
<script>



import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'violationDetails',//组件名称
  components: {},//组件引用
  props: ["selectData"],
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData:{},//表单数据

    });

    //文件打开
    const fileClick = (e)=> {
      window.open(e);
    }



    //加载数据
    const loadData = ()=>{
      $axios.post(apiUrl.safetyAccountAccountPunishInfo,{uuid:props.selectData.uuid}).then((res) => {
        if(!!res){
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })


    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      fileClick,//文件打开
      apiUrl,
    }
  }
})
</script>
<style lang="less">
._wz_violationDetails {
  ight: 100%;
  overflow: auto;

   table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 10%;
      max-height: 90%;
      min-width: 10%;
      max-width: 90%;
    }
  }
}
</style>
